<template>
	<el-dialog title="实验反馈" :visible.sync="visible" width="992px">
		<el-form ref="form" :model="formData" :rules="formRules" label-width="105px" class="experiment_feedback_form">
			<el-form-item label="实验满意度" prop="filed1">
				<el-rate v-model="formData.filed1" show-text></el-rate>
			</el-form-item>
			<el-form-item label="反馈内容" prop="content">
				<quill-editor
					v-model="formData.content"
					placeholder="请对测量技术、完成情况、实验效率以及是否达到实验预期等做出评价，并给出您的建议"
				></quill-editor>
				<p class="tips">
					<i class="el-icon-warning"></i>
					<font color="#909399">此反馈仅中心管理员可见，课题PI不可见。 尽可能提供建议，实验局限</font>
				</p>
			</el-form-item>
		</el-form>
		<template slot="footer">
			<el-button size="medium" @click="visible = false">取消</el-button>
			<el-button size="medium" type="primary" @click="handleSubmitForm()" :loading="btnLoading">确定</el-button>
		</template>
	</el-dialog>
</template>

<script>
import { mapGetters } from 'vuex';
import { addedFeedback } from '@/api/system/sysFeedback';
export default {
	props: {
		value: { type: Boolean, default: false },
		dataId: { type: String, default: '' }
	},
	data() {
		return {
			visible: this.value,
			formData: {},
			formRules: {
				filed1: { required: true, message: '请选择实验满意度', trigger: 'change' },
				content: { required: true, message: '请输入反馈内容', trigger: 'blur' }
			},
			btnLoading: false
		};
	},
	computed: {},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
			this.$nextTick(() => {
				this.formData = {};
			});
		}
	},
	methods: {
		handleSubmitForm() {
			this.$refs['form'].validate((valid) => {
				if (!valid) return false;
				this.btnLoading = true;
				this.submitFormRequest();
			});
		},

		//格式化提交参数
		formatFormRequest() {
			let params = { ...this.formData };
			params['siteId'] = this.dataId;
			return params;
		},

		async submitFormRequest() {
			let params = this.formatFormRequest();
			let result = await addedFeedback(params).then((res) => res.data);
			this.btnLoading = false;
			if (result.code === '0') {
				this.visible = false;
				this.$emit('finish');
				this.$showCustomMessage('success', '提交反馈成功');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
:deep(.experiment_feedback_form) {
	flex: 1;
	padding-right: 6px;
	overflow: hidden;
	.el-form-item__label {
		font-size: 16px;
	}
	.ql-toolbar {
		display: flex;
		flex-wrap: wrap;
	}
	.el-rate {
		display: flex;
		align-items: center;
		margin-top: 8px;
		height: auto;
	}
	.el-rate__icon {
		font-size: 24px;
	}
	.el-rate__text {
		font-size: 16px;
	}
	.el-input {
		font-size: 16px;
	}
	.el-textarea {
		font-size: 16px;
	}
	p.tips {
		line-height: 1;
		margin-top: 10px;
		i {
			margin-right: 6px;
		}
	}
}
</style>
